<template>
  <div class="ranking">
    <MusicSearch />
    <MusicLaoding v-if="show" />
    <!-- 导航 -->
    <div v-else>
      <list-title>排行榜</list-title>
      <MusicRankings :musicList="musicList" />
      <list-title>全球榜</list-title>
      <MusicWorldRank :musicList="musicList" />
    </div>
    <MusicTabBar :actives="3" />
  </div>
</template>

<script>
import { GettoplistlAPI } from "@/api/api.js";
import ListTitle from "@/components/video/ListTitle";
import MusicSearch from "@/components/home/search.vue";
import MusicLaoding from "@/components/common/laoding.vue";
import MusicSidebar from "@/components/common/sidebar.vue";
import MusicRankings from "../components/rankings/rankings.vue";
import MusicWorldRank from "../components/rankings/world_rank.vue";
import MusicTabBar from "../components/Tab_bar/Tab_bar.vue";

export default {
  name: "MusicRanking",
  components: {
    ListTitle,
    MusicSearch,
    MusicSidebar,
    MusicTabBar,
    MusicRankings,
    MusicWorldRank,
    MusicLaoding,
  },
  data() {
    return {
      musicList: [],
      singerList: [],
      show: true,
    };
  },

  mounted() {
    GettoplistlAPI().then((res) => {
      this.musicList = res.data.list;
      if (res.status == 200) {
        this.show = false;
      }
    });
    this.$store.commit("SET_HIGHLY", true);
  },
  destroyed() {
    this.$store.commit("SET_HIGHLY", false);
  },
  methods: {},
};
</script>

<style lang="less" scoped>
</style>